<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style type="text/css">
			.box{
				width:200px;
				height:200px;
				border:1px red solid;
				font-size: 32px;
				text-align: center;
				float:left;
			}
			.box2{
				width:800px;
				height:210px;
				border:1px solid black;
			}
		   .clear{
			   clear:both;
		   }
		   .bigbox{
			   overflow: hidden;
		   }
		.clearfix::after{
			content:"";
			display:block;
			height:0;
			clear:both;
			visibility: hidden;
		}
		.clearfix::after,.clearfix::before{
			content:"";
			display:table;
		}
		.clearfix::after{
			clear:both;
		}
			
		</style>
	</head>
	<body>
		<div class="bigbox clearfix">
		<div class="box">1</div>
		<div class="box" style="height: 210px;">2</div>
		<div class="box" style="height:240px ;">3</div>
		</div>
		<div class="box2"></div>
	</body>
</html>
